<template>
  <div id="doc-qrcode" class="am-text-center am-padding-vertical"></div>
</template>

<script>
export default {
  name: 'qr-code',
  data() {
    return {
    }
  },
  props: {
    text: String
  },
  methods: {
    ready() {
      this.genQRC();
    },
    genQRC() {
      if(this.text !== '') {
        $('#doc-qrcode').qrcode({
          text: this.text,
          width: 190,
          height: 190
        });
      }
    }
  },
  watch: {
    text(val) {
      $('#doc-qrcode').html('');
      if(val !== '') {
        $('#doc-qrcode').qrcode({
          text: val,
          width: 190,
          height: 190
        });
      }
    }
  },
  mounted() {
    this.ready();
  }
}
</script>

<style>

</style>